<template>
	<view >
		<pageHeader :leftImgBack='false'  @back='back' :fixed='true' :border='true'>
			<text>选择商品</text>
			<text slot="left" class="header-left">取消</text>
			<image src="/static/svg/search2.svg" mode="" @tap="toSearch" class="header-right-img" slot="right"></image>
		</pageHeader>
		<view class="body">
			<view class="product" v-for="(item,index) in linkList" :key='index' @tap="toChooseProduct" :data-index='index'>
				<image :src="item.choose?select:notSelect" mode=""></image>
				<productLink :width='"628rpx"' :isNeedDele='false' :backgroundColor='"#FFFFFF"' :message='item'/>
			</view>
		</view>
		<view class="add_button" :style="{backgroundColor:canDo?'#C84739':'#C8C8C8'}" @tap="toAdd">
			<text>添加</text>
		</view>
	</view>
</template>

<script>
	import pageHeader from "@/components/header/header.vue"
	import productLink from "@/components/ReleaseFineArt/productLink.vue"
	export default {
		components: {pageHeader,productLink},
		data() {
			return {
				select:require('@/static/svg/The selected.svg'),
				notSelect:require('@/static/svg/Not to choose.svg'),
				canDo:false,
				linkList:[],
				isFull:false,
				canChoose:0,
				hasMore:true,
				pageNumber:1,
				showLoading:false
			};
		},
		onShow() {
			this.getMessage()
		},
		methods: {
			getMessage(){
				let message=localStorage.getItem("releaseFineArtMessage")?JSON.parse(localStorage.getItem("releaseFineArtMessage")):{}
				if(message.linkList){
					this.canChoose=10-message.linkList.length
					if(this.canChoose==0){
						this.isFull=true
					}
				}
				this.linkList=[{
						"shopLink":"421rrv12412v42",
						"shopImage":"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3663179458,4263162468&fm=15&gp=0.jpg",   
						"shopContent":"这是商品1号",  
						"shopPrice":99.99,
					},
					{
						"shopLink":"4v124v12c",
						"shopImage":"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3548804822,3650468119&fm=15&gp=0.jpg",
						"shopContent":"这是商品1号",
						"shopPrice":50.6,
					},]
				for(let a=0;a<this.linkList.length;a++){
					this.linkList[a].choose=false
				}
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			toChooseProduct(e){
				let a=e.currentTarget.dataset.index
				if(this.isFull&&!this.linkList[a].choose){
					return
				}
				if(this.linkList[a].choose){
					this.canChoose+=1
				}else{
					this.canChoose-=1
				}
				if(this.canChoose==0){
					this.isFull=true
				}else{
					this.isFull=false
				}
				this.linkList[a].choose=!this.linkList[a].choose
				this.$forceUpdate()
				let canDo=false
				for(let c=0;c<this.linkList.length;c++){
					if(this.linkList[c].choose){
						canDo=true
						break
					}
				}
				this.canDo=canDo
			},
			toAdd(){
				if(!this.canDo){
					return
				}
				let chooseList=[]
				for(let c=0;c<this.linkList.length;c++){
					if(this.linkList[c].choose){
						chooseList.push(this.linkList[c])
					}
				}
				let message=localStorage.getItem("releaseFineArtMessage")?JSON.parse(localStorage.getItem("releaseFineArtMessage")):{}
				message.linkList=message.linkList?message.linkList:[]
				message.linkList=message.linkList.concat(chooseList)
				localStorage.setItem('releaseFineArtMessage',JSON.stringify(message))
				this.back()
			},
			toSearch(){
				uni.navigateTo({
					url: '/pages/search/searchIndex?type=chooseProduct'
				})
			}
		},
	}
</script>

<style lang="scss" >
page{
	background-color: #F7F7F7;
}
.header-left{
	font-size: 32rpx;
	letter-spacing: 1rpx;
	color: #666666;
}
.header-right-img{
	height: 46rpx;
	width: 46rpx;
	margin-right: 24rpx;
}
.body{
	padding-bottom: 128rpx;
	.product{
		display: flex;
		align-items: center;
		image{
			height: 42rpx;
			width: 42rpx;
			margin: 0 20rpx 0 30rpx;
		}
	}
}
.add_button{
	height: 98rpx;
	width: 750rpx;
	position: fixed;
	z-index: 10;
	bottom: 0;
	left: 0;
	background-color: #C84739;
	display: flex;
	align-items: center;
	justify-content: center;
	text{
		color: #FFFFFF;
		font-size: 34rpx;
		letter-spacing: 1rpx;
	}
}
</style>
